<template>
    <div class="loginDiv">
        <div class="title" style="text-align: center">
            十方智育
        </div>
        <div class="loginItem">
            <div class="labDiv"><label for="labDiv">用户名</label> </div>
            <div class="inputDiv"> <el-input id="username" v-model="username" placeholder="请输入内容"></el-input></div>
        </div>
        <div class="loginItem">
            <div class="labDiv"><label for="password">密&nbsp;&nbsp;&nbsp;码</label></div>
            <div class="inputDiv"><el-input placeholder="请输入密码" v-model="password" show-password></el-input></div>
        </div>
        <div class="buttonDiv">
            <el-button type="primary" @click="login" style="margin-right: 60%;">登录</el-button>
            <el-button type="primary">注册</el-button>
        </div>


    </div>


</template>

<script>
export default {
    data() {
        return {
            username: "",
            password: "",
            msg: "",
            loginInfo: {}
        }
    },
    methods: {
        login() {
            console.log(this.username);
            console.log(this.password);
            this.axios.get("http://localhost:8080/login", {
                params: {
                    username: this.username,
                    password: this.password
                }
            }).then(res => {

                this.loginInfo = res.data.data
                console.log(this.loginInfo);
                if (this.loginInfo.code == 0) {
                    this.$message.error(this.loginInfo.msg);
                } else if (this.loginInfo.code == 2) {
                    this.$message.error(this.loginInfo.msg);
                } else {
                    this.$message({
                        message: '登陆成功 欢迎用户' + this.loginInfo.nickname,
                        type: 'success'
                    });
                }
                //记录登陆状态 全局：vuex，sessionStorage，localStorage
                if (this.loginInfo.code == 1) {
                    // 记录登陆状态 全局：vuex，sessionStorage，localStorage
                    sessionStorage.setItem("uid", this.loginInfo.Id);
                    sessionStorage.setItem("username", this.loginInfo.username);
                    sessionStorage.setItem("nickname", this.loginInfo.nickname);
                    sessionStorage.setItem("status", this.loginInfo.code);
                } else {
                    console.log("登录失败");
                }
                // childByValue是在父组件on监听的方法
                // 第二个参数this.childValue是需要传的值
                this.$emit('childByValue', this.loginInfo)


            })

        }


    }
}

</script>

<style scoped>
.loginDiv {
    background-color: #cbebed;
    width: 30%;
    margin-left: 35%;
    margin-right: 35%;
    border: 1px solid #007acc;
    height: 300px;
    margin-top: 10%;
    border-radius: 10px;
}

.loginItem {
    display: flex;
    line-height: 100px;
}

.labDiv {
    padding-left: 20px;
    color: #409eff;
}

.inputDiv {
    padding-left: 20px;
    width: 80%;
}

.title {
    color: #409eff;
    font-size: 30px;
    margin-top: 10px;
}

.buttonDiv {
    display: flex;
    padding-left: 16%;
}
</style>
